<!--
  フレーム内に表示する簡易ガジェット用HTML
-->
<html><head>
  <meta http-equiv="content-type" 
        content="text/html; charset=utf-8" />
  <script type="text/javascript">
// メッセージのレシーバとなるURLは初期ロード時に
// フラグメント識別子で渡されるものとする
// なお、location.hashを使わないのは、フラグメント識別子の値が
// ブラウザによって自動的にURIデコードされる場合があるため
var receiverUrl = 
  decodeURIComponent(location.href.split('#')[1]);

// リストにアイテムを追加する
function addItem() {
  var item = document.getElementById('item').value;
  if (item) {
    var ul = document.getElementById('itemList');
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(item));
    ul.appendChild(li);
    adjustHeight(); // アイテム追加後にガジェットの高さを調節
  }
}

// リストからアイテムを削除する
function removeItem() {
  var ul = document.getElementById('itemList');
  if (ul.lastChild) {
    ul.removeChild(ul.lastChild);
    adjustHeight(); // アイテム削除後にガジェットの高さを調節
  }
}

// フレームの高さを調整する
// 現在の高さの情報を入れ子のフレームに表示するレシーバHTML経由で
// コンテナ（親フレーム）に伝える
function adjustHeight() {
  var height = calcDocumentHeight();
  var receiverFrame = document.createElement('iframe');
  // フラグメント識別子に高さ情報をセット
  receiverFrame.src = receiverUrl + '#' + height;
  receiverFrame.style.width = '0px';
  receiverFrame.style.height = '0px';
  receiverFrame.style.visibility = 'hidden';
  // フレームの読み込み後、要らなくなったフレームはDOMから削除する
  var cleanup = function() { 
    setTimeout(function(){ 
      receiverFrame.parentNode.removeChild(receiverFrame);
    }, 1);
  }
  receiverFrame.onload = cleanup;
  receiverFrame.onreadystatechange = function() { // for IE
    if (receiverFrame.readyState == 'loaded' ||
        receiverFrame.readyState == 'complete') {
      cleanup();
      receiverFrame.onreadystatechange = null;
    }
  }
  document.body.appendChild(receiverFrame);
}

// コンテンツの高さの計算
function calcDocumentHeight() {
  var body = document.body;
  var docEl = document.documentElement;
  var vh = window.innerHeight || docEl.clientHeight ||
           body.clientHeight;
  var sh = docEl.scrollHeight;
  var oh = docEl.offsetHeight;

  if (docEl.clientHeight !== oh) {
    sh = body.scrollHeight;
    oh = body.offsetHeight;
  }

  if (sh > vh) {
    // Content is larger than frame view
    return sh > oh ? sh : oh;
  } else {
    // Content is smaller than frame view
    return sh < oh ? sh : oh;
  }
}

// 初期表示時に自動的に高さ調整
window.onload = adjustHeight;

  </script>
</head>
<body style="background-color:#ccccff">
  <p>
    Gadget in 
    <script type="text/javascript">
    document.write('<b>' + location.hostname + '</b>')
    </script>
  </p>
  <input type="text" id="item" value="Test #1" />
  <input type="button" value="Add" onclick="addItem()" />
  <input type="button" value="Remove" onclick="removeItem()" />
  <ul id="itemList"></ul>
</body></html>

